HTML Grouping

Slides: OpenOffice PowerPoint
Reading: HFHTML Ch. 11

Tools

XHTML to PDF translator: Prince 8.0 download.

FTP clients: FileZilla, FireFTP, and Net2FTP

Color keywords: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

To validate your CSS files: http://jigsaw.w3.org/css-validator.
To valicate your XHTML: http://validator.w3.org.

Lab, part I

• Here is the code for chapter 11 from the text's web site.
• Download and unzip it into your My Documents directory.
• Add a <div> element to the lounge.html and lounge.css:
  • the identifier (id) should be elixirs and contain the elixir menu,
  • the menu should have width 200 pixels, a thin solid border, centered text, and 20 pixels of padding on all sides but the top,
  • further, use the background image, placing it in the upper left hand corner and repeating it across the top.
• Next, using descendant selectors, change the color of the headings inside the elixirs section only:
  • the <h1> headings should be black, and
  • the <h2> headings should be red
• Add a <div> element to the lounge.html and to lounge.css for the footer (the copyright information at the bottom of the page).
• Using style rules only for the footer, make the text centered, small (50%), and add a generous top margin.
• Move the elixirs section of the HTML file directly below the logo, and add the following rule to the #elixirs selection:
     float: right;
  What happens?
• Add <span> elements for the CDs (at the bottom of the page), so that the names of CDs appear in italics.
• Add <span> elements for the artists so that their names appear in bold.
• Validate your lounge.css file using the CSS validator: http://jigsaw.w3.org/css-validator
• (Optional) add the indicated icon to your "journal.html" web page.

Lab, part II

On your thumb drive:

• In your labs directory, create a subdirectory for today's lab.
• Transfer the lounge directory to this new subdirectory.
• Create a hyperlink from your labs directory's index.html to the page you worked on today.
• Make a footer for your index.html page on your about me site:
  • Steal the footer you created in part I of the lab.
  • Replace the copyright information in your footer with the date the page was last changed.
  • Give your footer a different background color from the rest of the page.
• In your class schedule, use the span element to put the names of your instructors in a colored italics.
• Validate your CSS file using the CSS validator: http://jigsaw.w3.org/css-validator
• Validate your index.html file using the XHTML validator: http://validator.w3.org.
• Add the appropriate icon(s) to your index.html web page.

Lab, part III

• Using an FTP client, synchronize your web site to the image on your thumbdrive.

Always shut down your computer and turn off your display before leaving the lab.